<!DOCTYPE html>
<html>

<head>
    <title>MSE HTML5 Video Player</title>

    <style>
        .videodiv {
            width: 400px !important;
            height: 225px !important;
        }
    </style>

    <script type="text/javascript" src="MSEVideo.js"></script>
</head>

<body>
    <button id="playbutton">Play</button>
    <button id="stopbutton">Stop</button>

    <div id="videolayout" class="divcontainer">
        <table>
            <tr>
                <td>
                    <div id="video1" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video2" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video3" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video4" class="videodiv">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="video5" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video6" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video7" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video8" class="videodiv">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="video9" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video10" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video11" class="videodiv">
                    </div>
                </td>
                <td>
                    <div id="video12" class="videodiv">
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <script>
        document.getElementById('playbutton').addEventListener('click', mseplay, false);
        document.getElementById('stopbutton').addEventListener('click', msestop, false);

        var mse_object1,mse_object2,mse_object3,mse_object4,mse_object5,mse_object6,mse_object7,mse_object8;

        function mseplay(evt) {
            //if ('chrome' == judgeBrowser()) {
                mse_object1 = setupMSE('video1', 'wss://192.168.230.10:8099/live/123');
				//mse_object2 = setupMSE('video2', 'wss://127.0.0.1:12990?channel=222&video=true');
				//mse_object3 = setupMSE('video3', 'wss://192.168.3.45:443?channel=guid0&video=true');
				//mse_object4 = setupMSE('video4', 'wss://192.168.3.45:443?channel=guid0&video=true');
				//mse_object5 = setupMSE('video5', 'wss://192.168.3.45:443?channel=guid0&video=true');
				//mse_object6 = setupMSE('video6', 'wss://192.168.3.45:443?channel=guid0&video=true');
				//mse_object7 = setupMSE('video7', 'wss://192.168.3.45:443?channel=guid0&video=true');
				//mse_object8 = setupMSE('video8', 'wss://192.168.3.45:443?channel=guid0&video=true');
            //}
        }

        function msestop(evt) {
            closeMSE(mse_object1);
			closeMSE(mse_object2);
			closeMSE(mse_object3);
			closeMSE(mse_object4);
			closeMSE(mse_object5);
			closeMSE(mse_object6);
			closeMSE(mse_object7);
			closeMSE(mse_object8);
        }
    </script>
</body>

</html>